<template>
  <div>
    <!-- 
      生命周期：
        vue实例从创建到销毁的整个过程 也就是从开始创建->初始化数据->编译模块->挂载dom渲染->更新渲染->卸载等一系列过程
        在生命周期的不同阶段对应着不同的钩子函数，利用这些函数可以实现数据管理和dom操作两大重要功能

        八大生命周期：
        1.vue实例创建之前 beforeCreate
        2.vue实例创建之后 created
        3.dom加载完成之前 beforeMount
        4.dom加载完成之后 Mount
        5.数据更新之前 beforeupdate
        6.数据更新之后 updated
        7.实例销毁之前 beforeDestroy
        8.实例销毁之后 destroyed

        首次加载页面会触发前四个生命周期
    -->
    <!-- 获取dom 先用ref取个名 再通过this.$refs.名字获取 -->
    <p ref="ps">{{ msg }}</p>
    <p>{{ num }}</p>
    <button @click="handleClick">数据变化</button>
    <button @click="des">销毁</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '二狗',
      num: 1
    }
  },
  methods: {
    handleClick() {
      console.log('twoDog过端午');
      this.num++
    },
    des() {
      // 销毁实例
      this.$destroy()
    }
  },
  beforeCreate() {
    console.log(this.msg) //undefined
    console.log('vue实例创建之前，初始化了一个空白的vue实例，此时只有一些基础的默认事件和生命周期,其他内容还没创建，data和method都无法访问');
  },
  created() {
    console.log(this.msg);
    this.handleClick()
    console.log(this.$refs.ps, '获取dom');

    console.log('实例创建之后，此阶段data和method已经初始化好了，想要操作data中的数据或者调用method里的方法，最早在这个阶段 但是created阶段不能操作dom');
    // 等待dom加载完成之后再去执行 dom操作失败时去使用
    this.$nextTick(() => {
      console.log(this.$refs.ps, '获取dom');
    })

  },
  beforeMount() {
    console.log(this.$refs.ps, 'beforeMount获取dom');
    console.log('dom加载完成之前 模块已经在内存中遍历完了但是还未挂载到页面上');

  },
  mounted() {
    console.log(this.$refs.ps, 'Mount获取dom');
    console.log('dom加载完成之后 vue实例已经完全成熟 是我们实现方法 过渡 dom操作的最佳阶段 此时组件已经脱离创建 进入运行阶段');
  },
  beforeUpdate() {
    console.log('数据更新前，此时页面中显示的数据还是旧的 data里的数据是最新的 页面数据未同步');

  },
  updated() {
    console.log('数据更新之后，页面和数据同步');

  },
  beforeDestroy() {
    console.log('vue实例销毁之前，vue实例已经从运行阶段进入到销毁阶段，data，methods还处于可用状态');

  },
  destroyed() {
    console.log('实例销毁之后 组件已被推毁 方法不可用');

  }

}
</script>

<style lang="scss" scoped></style>